<template>
  <div class="updateOneFieldValue">
    <je-switch v-model:value="isOnlyChecked" mode="checkbox"></je-switch
    >&nbsp;&nbsp;只修改列表选中的数据

    <je-radio-group
      v-model:value="value"
      class="radioGroup"
      config-info="JE_FUNC_COLUMN_ALIGN,value,code,S"
      style="justify-content: center"
      option-type="button"
    />
  </div>
</template>

<script>
  import { toRefs, reactive, defineComponent } from 'vue';
  import { Switch, Radio } from '@jecloud/ui';

  export default defineComponent({
    name: 'UpdateOneFieldValue',
    components: {
      JeSwitch: Switch,
      JeRadioGroup: Radio.Group,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {},
      },
    },
    emits: [],
    setup(props) {
      const state = reactive({
        fieldName: props.recordData.fieldName,
        isOnlyChecked: '1',
        value: 'left',
      });

      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style lang="less">
  .updateOneFieldValue {
    .radioGroup {
      display: block;
    }
    // .radioGroup > .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
    //   background: rgba(50, 101, 245, 0.1) !important;
    // }
    .radioGroup > .ant-radio-button-wrapper {
      padding: 0 20px !important;
    }
  }
</style>
<style lang="less" scoped>
  .updateOneFieldValue {
    .title {
      width: 100%;
      .strong {
        color: red;
      }
    }
    padding-bottom: 10px;
    text-align: center;
    .radioGroup {
      margin: 20px 0 0px 0;
    }
  }
</style>
